<template>
<div class="login">
  <div class="goback">
        <div active-class="active" @click="goback">
        <img src="" alt="">
        </div>
  </div>
  <div>
    <img src="../../assets/img/photo.png" alt="">
  </div>
  <!-- <p>欢迎来到吃了吗</p> -->
  <van-form @submit="onSubmit" >
   <van-field
    v-model="username"
    name="name"
    label="用户名"
    placeholder="用户名"
    :rules="[{ pattern:name, message: '4到16位（字母，数字）' }]"
  />
  <van-field
    v-model="password"
    name="passworde"
    label="密码"
    placeholder="密码"
    type="password"
    :rules="[{ pattern:passworde, message: '以大写或小写字母开头的五位数' }]"
  />
 

  <div style="margin: 30px 45px;width:290px;height:30px;">
    <van-button round block type="info" native-type="submit">
      登 录
    </van-button>
 
  </div>
  <router-link tag="div" class="active" :to="{name:'signIn'}">没有账号？快去注册吧</router-link>
</van-form>

  <div class="login-tip" v-show="state">
      登录成功,正在跳转...
  </div>
  <div class="login-tip" v-show="errorState">
      账号或密码错误，请重新登录
  </div>
</div>
</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
import { Dialog } from 'vant';

export default {
  data() {
    
    return {
     
      username: '',
      password: '',
      state:false,
      errorState:false,
      
      // 4到16位（字母，数字）
      name: /^[a-zA-Z0-9]{4,16}$/,
      // 最少6位，包括1个小写字母，1个数字，1个特殊字符
     passworde:/^[a-zA-Z_]\w{5,}$/, 
    };
    
  },
  created() {
    // 底部菜单隐藏
    this.$store.state.footerNavShow = false
  },
  methods: {
    // 登录按钮
    onSubmit(values) {
      // 汇总登录信息
      const userinfo ={
        username: values.name,
        password: values.passworde,
      }
      // 发送登录请求
      this.$api.login(userinfo).then((res)=>{
        if(res.data.code === 0){//登录成功
          this.state = true
          this.$store.commit('loginsuccess',res.data.token);
          this.$store.state.footerNavShow = true
          this.$store.state.username = res.data.username
          setTimeout(()=>{
            this.$router.push({ name: "home" });
         },2000)
        }else{
         this.errorState = true
         this.username= '',
         this.password= ''
         setTimeout(()=>{
           this.errorState = false
         },2000)
        }
      })
    },
    // 返回首页
    goback(){
      this.$store.state.footerNavShow = true
      this.$router.push("/home")
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
.active{
  color: #ccc;
  text-align: center;
  font-size: 14px;
  text-decoration: underline;
}
.login-tip{
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.login{
  // width: 375px;
  height: 667px;
  background: url("../../assets/img/beijing.png")  no-repeat 100% 100%/cover;
  opacity: 0.8;
  z-index: 1;
  .goback{
        position: absolute;
        top: -55px;
        left: 5px;
        box-sizing: border-box;
        img{
            width: 30px;
            height: 30px;
        }
    }
  img{
    width: 120px;
    height: 120px;
    display: flex;
    margin: 0 auto;
    padding-top: 70px;
    z-index: 5;
    color: white;
  }
  p{
    text-align: center;
    display: flex;
    font-size: 28px;
    font-weight: none;
    justify-content: space-around;
    color: white;
    margin: 25px 0;
    font-family: 'KaiTi';
  }
  .user{
    width: 300px;
    height: 150px;
    .el-input{
      border-radius: 30px;
    }
  }
  
}
.van-button{
  width: 150px;
  margin-left: 60px;
  margin: 0 auto;
}
.van-button--info{
  background-color: #f5aa11;
  border: 1px solid #f5aa11;
  margin-top: 15px;
  .van-button__text{
    font-size: 16px;
    
  }
}
.van-form{
  div{
    
    margin-top: 15px;
  }
}
.van-field__control{
  border-radius: 30px;
  width: 100px;
  height: 100px;
}
.van-button__text{
  margin-top: -27px;
}
.van-field__control{
  border: 1px solid #666;
}
.van-cell{
  border-radius: 30px;
  width: 300px;
  margin: 0 auto;
}

</style>
